<template>
	<view style="overflow: hidden;">
		<view class="list" v-if="!showLoading">
			<view v-if="eventList.length>0">
				<view class="list-item" v-for="(item, index) in eventList" :key="index" @click="toDetail(item.id)">
					<view class="list-item-left">
						<view class="tag" v-if="!item.free">{{item.free ? '免费' : '付费'}}预约</view>
						<view class="title">{{item.name}}</view>
						<view class="time">活动时间: {{item.time}}</view>
						<view class="money">活动费用: {{item.cost}}元</view>
						<view class="school" v-if="eventType === 0">{{item.school || '浦江'}}·{{item.grade}}</view>
						<view class="button">立即报名</view>
					</view>
					<view class="list-item-right">
						<image :src="item.firstMedia" mode="aspectFill" />
					</view>
				</view>
			</view>
			<view style="padding: 40rpx 0;" v-else>
				<u-empty mode="search" :iconSize="90" text="数据为空"></u-empty>
			</view>
		</view>
		<view class="skeleton" style="margin-right: 40rpx;" v-else>
			<u-row :gutter="20">
				<u-col span="8" :key="index">
					<view style="margin-top: 20rpx;">
						<u-skeleton rows="4" titleWidth="30%" title :loading="showLoading"></u-skeleton>
					</view>
				</u-col>
				<u-col span="4">
					<u-skeleton avatar avatarSize="150" avatarShape="square" :loading="showLoading"></u-skeleton>
				</u-col>
			</u-row>
		</view>
		<LoginModal ref="loginModal" />
	</view>
</template>

<script>
	import {
		checkLogin
	} from '@/utils/index.js';
	export default {
		props: {
			eventList: {
				type: Array,
				default: [],
			},
			eventType: {
				type: Number,
				default: 0,
			},
			showLoading: {
				type: Boolean,
				default: false,
			}
		},
		methods: {
			toDetail(id) {
				if (checkLogin()) {
					uni.navigateTo({
						url: `/pages/study/event-detail?id=${id}`
					})
				} else {
					this.$refs.loginModal.open();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		margin-top: 24rpx;
		padding: 32rpx 24rpx;
		border-radius: 16rpx;

		.list-item-left {
			width: 400rpx;

			.tag {
				width: 140rpx;
				height: 40rpx;
				line-height: 40rpx;
				padding: 4rpx 12rpx 4rpx 12rpx;
				border-radius: 8rpx;
				background-color: #203F3F;
				text-align: center;
				color: #D7A768;
			}

			.title {
				margin-top: 16rpx;
				margin-bottom: 20rpx;
				font-size: 32rpx;
				font-weight: bold;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #203F3F;
			}

			.time,
			.money {
				font-size: 28rpx;
			}

			.school {
				margin-top: 10rpx;
				color: #218BCC;
				font-size: 28rpx;
			}

			.button {
				margin-top: 10rpx;
				color: #74BB2A;
			}
		}

		.list-item-right {
			image {
				width: 106px;
				height: 142px;
				border-radius: 10rpx;
			}
		}
	}
</style>